import React, { Component } from 'react';
import { Layout, Menu, Icon } from 'antd';
import { Link } from 'react-router-dom';
import './style.less';
const { Sider } = Layout;
const SubMenu = Menu.SubMenu;

class NavLeft extends Component {
	constructor(props){
		super(props);
		this.state={}
	}
	onCollapse = (collapsed) => {
    console.log(collapsed);
    this.setState({ collapsed });
  }

	
  render() {
    return (
     <Layout style={{ minHeight: '100vh'}} className="setStyle">
     	<Sider
          collapsible
          collapsed={this.state.collapsed}
          onCollapse={this.onCollapse}
        >
        	 <div className="logo">
					<img src="/assets/logo-ant.svg" alt=""/>
					<h1>PC MS</h1>
				</div>
        	 <Menu theme="dark" defaultSelectedKeys={['1']} mode="inline">
            <Menu.Item key="1">
              <Icon type="home" />
              <span><Link to="/home">首页</Link></span>
            </Menu.Item>
            <SubMenu
              key="sub1"
              title={<span><Icon type="bar-chart" /><span><Link to="/product">商品</Link></span></span>}
            >
              <Menu.Item key="2"><Link to="/product/index">商品管理</Link></Menu.Item>
              <Menu.Item key="3"><Link to="/product/category">品类管理</Link></Menu.Item>
            </SubMenu>
            <SubMenu
              key="sub2"
              title={<span><Icon type="calendar" /><span><Link to="/order">订单</Link></span></span>}
            >
              <Menu.Item key="4"><Link to="/order/index">订单管理</Link></Menu.Item>
            </SubMenu>
            <SubMenu
              key="sub3"
              title={<span><Icon type="check-square-o" /><span><Link to="/user">用户</Link></span></span>}
            >
              <Menu.Item key="5"><Link to="/user/index">用户管理</Link></Menu.Item>
            </SubMenu>
          </Menu>
        </Sider>
     </Layout>
    );
  }
}

export default NavLeft;
